<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">填写地址</block>
		</cu-custom>
		<view class="bg-white margin radius">
			<view class="cu-form-group">
				<view class="title">收货人</view>
				<input placeholder-class="input-holder" placeholder="请输入收货人姓名" v-model="formData.realname"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号</view>
				<input placeholder-class="input-holder" placeholder="请输入手机号码" v-model="formData.mobile"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">所在地区</view>
				<cityPicker ref="cityPicker"></cityPicker>
			</view>

		</view>
		<view class="bg-white margin-lr radius">
			<view class="cu-form-group align-start">
				<view class="title">详细地址：</view>
				<textarea placeholder-class="input-holder" maxlength="-1" v-model="formData.address_details" placeholder="输入你的的详细地址"
				 class="text-right"></textarea>
			</view>
		</view>
		
		<view class="bg-white margin-lr radius">
			<view class="cu-form-group">
				<view class="title">是否默认：</view>
				<switch @change="SwitchChange" :class="formData.is_default==1?'checked':''" :checked="formData.is_default==1?true:false"></switch>
			</view>
		</view>
		<view class="margin-xl">
			<view class="cu-btn w100  round lg":class="['bg-'+theme]"  @tap="onSubmit">确认提交</view>
		</view>
		<view class="tips">请仔细检查是否有误，确认后</view>
		<view class="tips">会以您填写的地址发货，如填写有误后果自负</view>
	</view>
</template>

<script>
	import cityPicker from '@/components/shop/cityPicker.vue'
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				txt: '请选择',
				title: 'Hello',
				province_id: "0",
				city_id: "0",
				area_id: "0",
				formData: {
					realname: '',
					mobile: '',
					address_details: '',
					is_default:0
				},
				id: 0,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
			}
		},
		onLoad(options) {
			if (options.id) {
				let detail = this.$common.getCache('address_edit')
				if (!detail) {
					this.$common.showErrorModal('参数有误')
					return
				}
				this.formData.realname = detail.realname
				this.formData.mobile = detail.mobile
				this.formData.address_details = detail.address_details
				this.formData.is_default = detail.is_default
				this.id = detail.id
				console.log(detail)
				this.$nextTick((r) => {
					this.$refs.cityPicker.setSelect({
						provinces_id: parseInt(detail.province_id),
						city_id: parseInt(detail.city_id),
						area_id: parseInt(detail.area_id),
					})
				})
			} else {
				this.$nextTick((r) => {
					this.$refs.cityPicker.setSelect({
						provinces_id: 0,
						city_id: 0,
						area_id: 0,
					})
				})
			}
		},
		methods: {
			SwitchChange(e){
				if(e.detail.value){
					this.formData.is_default = 1
				} else  this.formData.is_default = 0
			},
			mathCacheSize() {
				let app_data = uni.getStorageSync('app_data')
				this.cache_size = parseInt(JSON.stringify(app_data).length / 1024)
			},
			onSubmit(e) {
				let formData = this.formData

				if (!formData.realname.trim()) {
					this.$common.showError('收货人姓名不能为空')
					return
				}
				if (!(/^1(2|3|4|5|6|7|8|9)\d{9}$/.test(formData.mobile))) {
					this.$common.showError('请输入正确的手机号')
					return
				}
				
				if (!formData.address_details.trim()) {
					this.$common.showError('详细地址不能为空')
					return
				}
				let select = this.$refs.cityPicker.getSelect()
				formData.province_id = select.provinces_id
				formData.city_id = select.city_id
				formData.area_id = select.area_id
				if (formData.province_id ==0 || formData.city_id ==0 || formData.area_id ==0) {
					this.$common.showError('请选择所在地区')
					return
				}
				
				let id = this.id
				uni.showLoading({
					title: '加载中...'
				})
				if (id) {
					this.$http
						.put('address', formData, {}, id)
						.then((response) => {
							console.log(response)
							this.$common.rmCache('address_list')
							uni.hideLoading()
							uni.setStorageSync('app_data', '')
							this.mathCacheSize()
							this.$common.showSuccess('提交成功', function() {
								uni.navigateBack({})
							})
						})
						.catch((response) => {
							console.log(response)
						})
				} else {
					this.$http
						.post('address', formData)
						.then((response) => {
							console.log(response)
							this.$common.rmCache('address_list')
							uni.hideLoading()
							uni.setStorageSync('app_data', '')
							this.mathCacheSize()
							this.$common.showSuccess('提交成功', function() {
								uni.navigateBack({})
							})
						})
						.catch((response) => {
							console.log(response)
						})
				}
			}
		}
	}
</script>

<style>
	.white-box {
		width: 678rpx;
		margin: 25rpx 36rpx 0;
		padding: 0rpx 36rpx;
		border-radius: 5rpx;
		background-color: #FFFFFF;
	}

	.white-box .cu-form-group {
		padding: 0;
	}

	.cu-form-group .title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.cu-form-group .picker {
		color: #CACACA;
		font-size: 30rpx;
	}

	.cu-form-group picker {
		margin-right: 0;
		padding-right: 20rpx;
		text-align: right;
	}

	.cu-form-group .input-holder {
		text-align: right;
		color: #CACACA;
		font-size: 30rpx;
	}

	.cu-form-group input {
		text-align: right;
	}

	.cu-form-group textarea {
		height: 95px;
	}

	button {
		width: 576rpx;
		margin: 180rpx 92rpx 20rpx;
	}

	.tips {
		width: 678rpx;
		margin: 0 36rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #C9C9C9;
		line-height: 45rpx;
		text-align: center;
	}
</style>
